import React from "react";
import {connect, RootStateOrAny, useDispatch, useSelector} from "react-redux";
import {MenuFoldOutlined, MenuUnfoldOutlined} from '@ant-design/icons';
import types from "../../store/action-types";
import './index.scss'


const ToggleTrigger = () => {

    const toggleCollapsed = useSelector((state: RootStateOrAny) => state.app);
    const dispatch = useDispatch();

    function toggle() {

        dispatch({type: types.APP_TOGGLE_SIDEBAR, sidebarCollapsed: !toggleCollapsed.sidebarCollapsed})

    }

    return (
        <div className="toggle-container">
            {toggleCollapsed.sidebarCollapsed ?
                <MenuUnfoldOutlined
                    className="trigger"
                    onClick={toggle}
                />
                :
                <MenuFoldOutlined
                    className="trigger"
                    onClick={toggle}
                />}
        </div>
    );
};

export default connect()(ToggleTrigger);

